<template>
  <div class="report-page">
    <!-- 页面标题 -->
    <div class="page-title">美容院回款报表</div>

    <!-- 顶部数据概览区 -->
    <div class="overview-area">
      <div class="overview-item">
        <div class="label">出货总数</div>
        <div class="value">¥25980.19</div>
      </div>
      <div class="overview-item">
        <div class="label">回款总额</div>
        <div class="value">¥20000.00</div>
      </div>
      <div class="overview-item">
        <div class="label">赠送总数</div>
        <div class="value">¥10000.90</div>
      </div>
      <div class="overview-item">
        <div class="label">年单账户</div>
        <div class="value">¥20000.00</div>
      </div>
    </div>

    <!-- 切换标签 + 搜索区 -->
    <div class="tab-search-area">
      <div class="tabs">
        <el-button 
          :type="activeTab === 'brand' ? 'primary' : 'default'" 
          class="tab-btn" 
          @click="switchTab('brand')"
        >
          按品牌
        </el-button>
        <el-button 
          :type="activeTab === 'type' ? 'primary' : 'default'" 
          class="tab-btn" 
          @click="switchTab('type')"
        >
          按类型
        </el-button>
      </div>
      <div class="search-group">
        <el-input placeholder="Search" class="search-input" />
        <el-button type="default" class="search-btn">搜索</el-button>
      </div>
    </div>

    <!-- 时间筛选区 -->
    <div class="time-filter">
      <el-button 
        :type="activeTime === 'month' ? 'primary' : 'default'" 
        class="time-btn" 
        @click="switchTime('month')"
      >
        本月
      </el-button>
      <el-button 
        :type="activeTime === 'lastMonth' ? 'primary' : 'default'" 
        class="time-btn" 
        @click="switchTime('lastMonth')"
      >
        上月
      </el-button>
      <div class="date-picker-group">
        <span>开始日期</span>
        <el-date-picker type="date" placeholder="年/月/日" class="date-picker" />
        <span>结束日期</span>
        <el-date-picker type="date" placeholder="年/月/日" class="date-picker" />
      </div>
    </div>

    <!-- 数据表格区（根据选中的标签切换数据） -->
    <el-table 
      :data="filteredTableData" 
      border 
      class="data-table"
      style="width: 100%"
      :show-summary="true"
      :summary-method="getSummary"
    >
      <el-table-column prop="serial" label="序号" align="center" />
      <el-table-column prop="shopName" label="门店名称" />
      <el-table-column prop="shopId" label="门店ID" align="center" />
      <el-table-column prop="contact" label="联系人" align="center" />
      <!-- 动态列：根据选中的标签显示不同内容 -->
      <el-table-column 
        :label="activeTab === 'brand' ? '合作品牌' : '产品类型'" 
        align="center"
      >
        <template #default="scope">
          {{ activeTab === 'brand' ? scope.row.cooperationBrand : scope.row.productType }}
        </template>
      </el-table-column>
      <el-table-column 
        prop="totalPayment" 
        label="累计回款" 
        align="right"
        sortable
      />
      <el-table-column 
        prop="totalShipment" 
        label="累计出货" 
        align="right"
        sortable
      />
      <el-table-column 
        prop="totalGift" 
        label="累计赠送" 
        align="right"
        sortable
      />
      <el-table-column prop="annualOrder" label="年单" align="center" />
      <el-table-column prop="beautician" label="美容导师" align="center" />
      <el-table-column prop="brandManager" label="品牌经理" align="center" />
      <el-table-column label="操作" align="center">
        <template #default>
          <el-button type="text" class="detail-btn">明细</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区 -->
    <div class="pagination-area">
      <div class="total-info">
        共{{ total }}条 共{{ Math.ceil(total / pageSize) }}页
      </div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10]"
        :page-size="pageSize"
        layout="prev, pager, next"
        :total="total"
      />
      <div class="page-jump">
        10条/页
        <el-input v-model="jumpPage" size="mini" class="jump-input" />
        <el-button type="default" size="mini" @click="handleJump">确定</el-button>
      </div>
    </div>

    <!-- 返回按钮 -->
    <el-button type="default" class="return-btn" @click="handleReturn">返回</el-button>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { ElMessage } from 'element-plus';

// 标签切换状态
const activeTab = ref('brand'); // 'brand' 按品牌, 'type' 按类型
// 时间筛选状态
const activeTime = ref('month'); // 'month' 本月, 'lastMonth' 上月

// 表格原始数据
const tableData = ref([
  {
    serial: 1,
    shopName: '名角美容养生',
    shopId: 'MCC01',
    contact: '王琳',
    cooperationBrand: '蓝妮儿',
    productType: '护肤品',
    totalPayment: '¥19,851.00',
    totalShipment: '¥90,851.00',
    totalGift: '¥9,851.00',
    annualOrder: '100万',
    beautician: '张三',
    brandManager: '张学礼'
  },
  {
    serial: 2,
    shopName: '丽人坊',
    shopId: 'MCC02',
    contact: '王芳',
    cooperationBrand: '贝亦美',
    productType: '彩妆',
    totalPayment: '¥25,620.00',
    totalShipment: '¥85,320.00',
    totalGift: '¥5,230.00',
    annualOrder: '80万',
    beautician: '李四',
    brandManager: '张学礼'
  },
  {
    serial: 3,
    shopName: '水悦SPA',
    shopId: 'MCC03',
    contact: '赵敏',
    cooperationBrand: '和悦肽',
    productType: '精油',
    totalPayment: '¥15,320.00',
    totalShipment: '¥60,150.00',
    totalGift: '¥3,210.00',
    annualOrder: '50万',
    beautician: '王五',
    brandManager: '李思思'
  },
  {
    serial: 4,
    shopName: '静雅美容',
    shopId: 'MCC04',
    contact: '刘敏',
    cooperationBrand: '蓝妮儿',
    productType: '护肤品',
    totalPayment: '¥22,150.00',
    totalShipment: '¥75,620.00',
    totalGift: '¥6,850.00',
    annualOrder: '60万',
    beautician: '赵六',
    brandManager: '李思思'
  },
  {
    serial: 5,
    shopName: '悦己美容院',
    shopId: 'MCC05',
    contact: '孙丽',
    cooperationBrand: '贝亦美',
    productType: '彩妆',
    totalPayment: '¥18,750.00',
    totalShipment: '¥58,920.00',
    totalGift: '¥4,320.00',
    annualOrder: '40万',
    beautician: '钱七',
    brandManager: '张学礼'
  }
]);

// 计算属性：根据选中的标签筛选显示数据
const filteredTableData = computed(() => {
  // 实际项目中可以根据标签切换不同的数据
  return tableData.value;
});

// 分页数据
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(tableData.value.length);
const jumpPage = ref('');

// 标签切换方法
const switchTab = (tab) => {
  activeTab.value = tab;
  currentPage.value = 1; // 切换标签时重置页码
  ElMessage.info(`已切换到${tab === 'brand' ? '按品牌' : '按类型'}视图`);
};

// 时间筛选切换方法
const switchTime = (time) => {
  activeTime.value = time;
  currentPage.value = 1; // 切换时间时重置页码
  ElMessage.info(`已切换到${time === 'month' ? '本月' : '上月'}数据`);
};

// 合计行计算
const getSummary = ({ columns, data }) => {
  const sums = [];
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = '合计';
      return;
    }
    // 仅计算金额列
    if (['totalPayment', 'totalShipment', 'totalGift'].includes(column.prop)) {
      // 实际项目中可以计算真实总和
      sums[index] = '¥100,000.00';
    } else {
      sums[index] = '-';
    }
  });
  return sums;
};

// 分页方法
const handleSizeChange = (val) => {
  pageSize.value = val;
  currentPage.value = 1;
};
const handleCurrentChange = (val) => {
  currentPage.value = val;
};
const handleJump = () => {
  const page = Number(jumpPage.value);
  const maxPage = Math.ceil(total.value / pageSize.value);
  if (page && page <= maxPage && page >= 1) {
    currentPage.value = page;
  } else {
    ElMessage.warning(`请输入1-${maxPage}之间的页码`);
  }
};

// 返回按钮
const handleReturn = () => {
  ElMessage.info('返回上一页');
};
</script>

<style scoped>
/* 页面基础样式 */
.report-page {
  padding: 20px;
  font-family: "Microsoft Yahei", sans-serif;
  background: #fff;
  position: relative;
  min-height: 500px;
}

/* 页面标题 */
.page-title {
  font-size: 18px;
  color: #333;
  font-weight: 600;
  margin-bottom: 24px;
}

/* 顶部数据概览区 */
.overview-area {
  display: flex;
  justify-content: space-around;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}
.overview-item {
  text-align: center;
  flex: 1;
}
.overview-item .label {
  font-size: 14px;
  color: #666;
  margin-bottom: 4px;
}
.overview-item .value {
  font-size: 24px;
  color: #23C6C8;
  font-weight: 600;
}

/* 切换标签 + 搜索区 */
.tab-search-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.tabs .tab-btn {
  border-radius: 4px 4px 0 0;
  margin-right: 8px;
  transition: all 0.3s;
}
/* 激活态标签样式 */
.tabs .tab-btn.is-primary {
  background-color: #23C6C8;
  border-color: #23C6C8;
  color: #fff;
}
.search-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.search-input {
  width: 180px;
}

/* 时间筛选区 */
.time-filter {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.time-btn {
  margin-right: 8px;
  transition: all 0.3s;
}
/* 激活态时间按钮样式 */
.time-btn.is-primary {
  background-color: #23C6C8;
  border-color: #23C6C8;
  color: #fff;
}
.date-picker-group {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
}
.date-picker {
  width: 120px;
}

/* 表格样式 */
.data-table {
  --el-table-header-text-color: #333;
  --el-table-body-text-color: #666;
  --el-table-border-color: #e0e0e0;
  margin-bottom: 20px;
}
.data-table .detail-btn {
  color: #23C6C8;
  padding: 0;
}
.el-table__footer-wrapper .el-table__footer {
  background-color: #fafafa;
}

/* 分页区 */
.pagination-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #666;
  margin-top: 16px;
  flex-wrap: wrap;
  gap: 10px;
}
.total-info {
  margin-right: 10px;
}
.page-jump {
  display: flex;
  align-items: center;
  gap: 8px;
}
.jump-input {
  width: 50px;
}

/* 返回按钮 */
.return-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 4px 12px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .overview-area {
    flex-wrap: wrap;
    gap: 16px;
  }
  .overview-item {
    flex: 1 1 40%;
  }
  .date-picker-group {
    margin-left: 0;
    margin-top: 10px;
    width: 100%;
  }
}
</style>